<template>
  <view class="nextShop">
    <van-tabs ref="tab" :active="active" @scroll="onScroll" @change="onChange" sticky color="#105BDE" line-width="25px">
      <van-tab title="全部门店">
        <shopList v-if="shopList.length > 0" :type="type" @clickToShopDetail="clickToShopDetail" :shopList="shopList" />
        <view class="no-data" v-else>
          暂无数据
        </view>
      </van-tab>
      <van-tab title="可借门店">
        <shopList :type="type" v-if="shopList.length > 0" @clickToShopDetail="clickToShopDetail" :shopList="shopList" />
        <view class="no-data" v-else>
          暂无数据
        </view>
      </van-tab>
      <van-tab title="可还门店">
        <shopList :type="type" v-if="shopList.length > 0" @clickToShopDetail="clickToShopDetail" :shopList="shopList" />
        <view class="no-data" v-else>
          暂无数据
        </view>
      </van-tab>
    </van-tabs>
  </view>
</template>

<script>
  import {
    hasToken
  } from '@/utils/token.js'
  import {
    getShopList
  } from '@/api/shop'
  import {
    mapGetters
  } from 'vuex'
  import shopList from './shopList.vue'
  export default {
    data() {
      return {
        active: 0,
        shopInfo: [
          // {
          //   id: 1,
          //   name: '天虹购物商场 (相城店)',
          //   images: require('../../static/images/banner.png'),
          //   distance: '280m',
          //   openHour: '24小时营业',
          //   address: '相城大道天虹商场负一楼最北侧',
          //   enabled: true,
          //   disabled: true
          // }
        ],
        shopList: [],
        params: { // 请求参数
          pageNum: 1, //页码
          pageSize: 10, //每页显示
        },
        loading: false
      }
    },
    components: {
      shopList
    },
    computed: {
      ...mapGetters(['token'])
    },
    watch: {
      token(newVal) {
        if (newVal) {
          this.getShopList()
        }
      },
      immediate: true,
      deep: true
    },
    onLoad() {
      if (!hasToken()) {
        if (this.$refs['showSheet']) this.$refs['showSheet'].showSheet = true
      }
    },
    onShow() {
      this.getShopList()
    },
    onReachBottom() {
      if (!this.loading) {
        this.loading = true; // 标记正在加载数据
        this.getShopList(this.params.pageNum + 1);
      }
    },
    methods: {
      clickToShopDetail(item) {
        uni.navigateTo({
          url: `/subpkg/shopInfo/index?distance=${item.distance}&locationInfo=${JSON.stringify(item)}`
        })
      },
      getShopList(index = 1, data) {
        let vthis = this;
        wx.getLocation({
          type: 'gcj02',
          success: async function(res) {
            if (hasToken()) {
              const newData = await getShopList({
                pageNum: index, // 页码
                pageSize: 10, // 每页显示数量
              }, {
                currentLongitude: res.longitude,
                currentLatitude: res.latitude,
                meter: 20000,
                ...data
              });

              if (newData.rows.length === 0) {
                this.loading = false; // 数据加载完成，取消加载标志
                return;
              }

              const duplicateCheck = new Set(vthis.shopList.map(item => JSON.stringify(item)));
              const filteredRows = newData.rows.filter(item => !duplicateCheck.has(JSON.stringify(item)));

              if (filteredRows.length > 0) {
                vthis.shopList = vthis.shopList.concat(filteredRows);
                vthis.shopInfo = JSON.stringify(vthis.shopList)
              }

              vthis.params.pageNum = index;
              this.loading = false; // 数据加载完成，取消加载标志
            }
          }
        });
      },
      onScroll() {
        this.$refs.tab.resize()
      },
      onChange(e) {
        if (hasToken()) {
          let vthis = this;
          vthis.shopList = JSON.parse(vthis.shopInfo)
          this.type = e.detail.index;
          let filteredList = [];
          if (this.type === 1) {
            this.getShopList(1, {
              canBorrow: true
            })
            vthis.shopList = vthis.shopList.filter(item => item.borrowCellNum > 0);
          } else if (this.type === 2) {
            this.getShopList(1, {
              canReturn: true
            })
            vthis.shopList = vthis.shopList.filter(item => item.returnCellNum > 0);
          } else {
            this.getShopList()
            return vthis.shopList
          }
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  .nextShop {
    min-height: 100vh;
    margin-bottom: 10px;
    background-color: #F9F9F9;

    ::v-deep .van-tab--active {
      color: #105BDE;
    }

    ::v-deep .van-tab__pane {
      min-height: 100vh;
    }

    .no-data {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 16px;
      color: #ccc;
    }
  }
</style>
